<template>
<div class="ShopLIst">
        <div class="xixi">
            <img src="https://image1.suning.cn/uimg/cms/img/157793128909842388.png?format=_is_1242w_100h.webp" alt="">
        </div>
    <div class="list" v-for="(item,index) in ShopList" :key="index" @click="$router.push({ path: '/Detail', query: { id: item.proid } })" >
        <div><img :src="item.img1" alt=""></div>
        <p>{{ item.desc | filText }}</p>
        <div class="ts">￥{{ item.originprice }}</div>
    </div>
</div>
</template>

<script>
import { hotList } from '@/api/index.js'
export default {
    data() {
        return {
            ShopList: [],
            count:1
        } 
    },
    filters: {
        filText(ts) {
            if (ts.length > 22) {
                return ts.substr(0,29)+"..."
            }
        }
    },
    mounted() {
        hotList(1, 20).then((ok) => {
            this.ShopList = ok.data.data
            this.$store.commit("setHostList", this.ShopList)
        })
    },
    created() {
        window.onscroll = () => {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            if (scrollTop + windowHeight == scrollHeight) {
                //写后台加载数据的函数
                this.count += 1
                hotList(this.count).then((ok) => {
                    console.log(ok)
                    this.ShopList = [...this.ShopList, ...ok.data.data]
                    this.$store.commit("setHostList", this.ShopList)
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
.ShopLIst{
    margin-bottom: 0.5rem;
    font-size: 0.1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .list{
        margin: 2.5%;
        width:45%;
        background-color: #ffffff;
        border-radius: 0.07rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img{
            width: 100%;
            border-radius: 0.07rem;
        }
        .ts{
            font-size: 0.18rem;
            color:#ff4822;
        }
        p{
            font-weight: bold;
        }
    }
    .xixi {
        width: 100%;
        height: 0.38rem;
        display: flex;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>